$breadcrumb: $prefix + 'breadcrumb';

.#{$breadcrumb} {
    @apply flex;

    &-inner {
        @apply inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse;
    }

    &-item {
        @apply flex items-center;

        &-text {
            @apply ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400;
        }

        &-link .#{$breadcrumb}-item-text {
            @apply cursor-pointer hover:text-blue-600 dark:hover:text-white;
        }

        &-icon {
            @apply inline-flex items-center text-sm font-medium text-gray-700 dark:text-gray-400;
        }

        &-separator {
            @apply rtl:rotate-180 w-3 h-3 text-gray-400 mx-1;
        }

    }
}